<template>
  <div class="wjf-component-container wjf-upload-container">
    <el-upload
      :action="action"
      :headers="headers"
      v-on="$listeners"
      v-loading="loading"
      :element-loading-text="elementLoadingText"
      :element-loading-spinner="elementLoadingSpinner"
      :element-loading-background="elementLoadingBackground"
      :file-list="fileList"
      :auto-upload="autoUpload"
      :show-file-list="showFileList"
      :data="data"
      :before-upload="beforeUpload"
      :on-error="error"
      :on-success="success"
    >
      <template slot="default">
        <slot name="default">
          <i class="el-icon-plus"></i>
        </slot>
      </template>
    </el-upload>
  </div>
</template>
<script>
import { getToken } from '@/utils/auth'
export default {
  name: 'WjfUpload',
  props: {
    viewProps: {
      type: Object,
      default() {
        return {
          fullscreen: true
        }
      }
    },
    viewListeners: {
      type: Object,
      default() {
        return {}
      }
    },
    action: {
      type: String,
      default: process.env.VUE_APP_BASE_API + '/sys/attach/upload'
    },
    elementLoadingText: {
      type: String,
      default: '文件上传中请稍后！'
    },
    elementLoadingSpinner: {
      type: String,
      default: 'el-icon-loading'
    },
    elementLoadingBackground: {
      type: String,
      default: 'rgba(0, 0, 0, 0.8)'
    },
    autoUpload: {
      type: Boolean,
      default: true
    },
    showFileList: {
      type: Boolean,
      default: true
    },
    showSuccessMsg: {
      type: Boolean,
      default: false
    },
    showErrorMsg: {
      type: Boolean,
      default: false
    },
    multiple: {
      type: Boolean,
      default: false
    },
    fileList: {
      type: Array,
      default() {
        return []
      }
    },
    headers: {
      type: Object,
      default() {
        return {
          Authorization: getToken()
        }
      }
    },
    params: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    return {
      loading: false,
      width: '',
      dialogVisible: false
    }
  },
  computed: {
    data: {
      get() {
        return this.params
      },
      set(val) {}
    }
  },
  methods: {
    beforeUpload() {
      this.loading = true
    },
    success(res, file, fileList) {
      const { response } = file
      const { code, msg } = response
      this.loading = false
      if (code === 200) {
        if (this.showSuccessMsg) {
          this.$message.success(
            msg || '文件上传成功！'
          )
        }
        this.$emit('success', response)
      } else {
        this.$message.error(msg || '文件上传失败！')
      }
    },
    error(res, file, fileList) {
      this.$emit('error', res, file, fileList)
    }
  }
}
</script>
